<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback OrangeBorderedBox">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Messages</h1>
                            <p:tooltip />
                            <h:form>
                                <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />

                                <p:commandButton value="Info" actionListener="#{messagesView.info}" />
                                <p:commandButton value="Warn" actionListener="#{messagesView.warn}" />
                                <p:commandButton value="Error" actionListener="#{messagesView.error}" />
                                <p:commandButton value="Fatal" actionListener="#{messagesView.fatal}" />
                            </h:form>

                            <div class="EmptyBox20"/>

                            <h:form>
                                <p:growl id="growl" sticky="true" />

                                <h:panelGrid id="grid" columns="3" cellpadding="5">
                                    <p:outputLabel for="default" value="Default:" />
                                    <p:inputText id="default" required="true" />
                                    <p:message for="default" />

                                    <p:outputLabel for="txt" value="Text:" />
                                    <p:inputText id="txt" required="true" />
                                    <p:message for="txt" display="text" />

                                    <p:outputLabel for="icon" value="Icon:" />
                                    <p:inputText id="icon" required="true" />
                                    <p:message for="icon" display="icon" />

                                    <p:outputLabel for="tt" value="Tooltip:" />
                                    <p:inputText id="tt" required="true" />
                                    <p:message for="tt" display="tooltip" />
                                </h:panelGrid>

                                <p:commandButton id="submitButton" value="Submit" update="grid growl" />
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>